<template>
  <el-card shadow="never">
    <div slot="header" class="card-header">
      <span>高级查询</span>
    </div>
    <el-form :inline="true" :model="formData">
      <el-form-item>
        <el-select v-model="formData.selectA" placeholder="所属省份">
          <el-option
            v-for="item in sf"
            :key="item.ProID"
            :label="item.name"
            :value="item.ProID"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formData.selectB" placeholder="办卡时间">
          <el-option
            v-for="item in timeArr"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="valA" placeholder="号码输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="val" placeholder="关键字输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialog = true">点击查询</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="查询展示" :visible.sync="dialog" width="60%">
      <el-form label-width="130px">
        <el-form-item label="号码">
          <el-input value="D52369" style="width:500px" disabled></el-input>
        </el-form-item>
        <el-form-item label="目前欠费状况">
          <el-link type="primary">点击查看</el-link>
        </el-form-item>
        <el-form-item label="年度累计欠费">
          <el-link type="primary">点击查看</el-link>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="dialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import sf from '@/utils/sf'
export default {
  data() {
    return {
      dialog: false,
      formData: {
        selectA: '',
        selectB: ''
      },
      val: '',
      valA: '',
      sf
    }
  },

  computed: {
    timeArr() {
      let timeArr = []
      // eslint-disable-next-line for-direction
      for (let index = 2000; index < 2021; index++) {
        timeArr.push(index)
      }
      return timeArr.reverse()
    }
  }
}
</script>

<style lang="scss" scoped></style>
